<%@page import="com.windfone.common.Constant"%>
<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%>
<%@ include file="head.jsp" %>
<%@ taglib uri="/WEB-INF/recommend.tld" prefix="windfone" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>風馳電訊-我的購物車</title>
<%@ include file="headkey.jsp" %>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link  rel="Stylesheet" type="text/css" href="css/shoppingcar.css"/>
<script src='js/numberUtil.js'></script>
<script src="js/jquery-1.4.2.js"></script>
<style>
#coodoo_Header a
{
	font-size:14px;
	font-weight:bold;
	font-weight:bold;
	font-size:14px;
	color:#FFFFFF;
	text-decoration:none;
}
</style>
<style>
html{color:black; background:white;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,blockquote,th,td{margin:0; padding:0;}
body{font-size:12px; font-family:Arial, Helvetica, sans-serif;}
img{border:0px; vertical-align:top;}
a{font-size:12px; text-decoration:none;}
a,a:link,a:visited{color:#353535;}
a:hover{color:#fc6900;}

.box3 dd.tl{float:left; width:7px; height:31px;}
.box3 dd.tb{float:left; height:31px;}
.box3 dd.tr{float:left; width:7px; height:31px;}
.box3 dd.bl{float:left; width:7px; height:7px; font-size:0px;}
.box3 dd.bb{float:left; height:7px; font-size:0px;}
.box3 dd.br{float:left; width:7px; height:7px; font-size:0px;}

.box3 .gg31tleft{background:url(images/box1/gg31_tleft.jpg);}
.box3 .gg31tbg{background:url(images/box1/gg31_tbg.jpg);}
.box3 .gg31tright{background:url(images/box1/gg31_tright.jpg);}
.box3 .gg31bleft{background:url(images/box1/gg31_bleft.jpg);}
.box3 .gg31bbg{background:url(images/box1/gg31_bbg.jpg);}
.box3 .gg31bright{background:url(images/box1/gg31_bright.jpg);}
.box3 .gg31bg{clear:both; border-left:solid 1px #dcdcdc; border-right:solid 1px #dcdcdc;}

.box03 dl.b03t dd.b03tl{float:left; width:6px; height:31px; background:url(images/box03_tleft.png);}
.box03 dl.b03t dd.b03tb{float:left; height:31px; background:url(images/box03_tbg.png);}
.box03 dl.b03t dd.b03tr{float:left; width:6px; height:31px; background:url(images/box03_tright.png);}
.box03 div.b03b{border-left:solid 1px #dcdcdc; border-right:solid 1px #dcdcdc;}
.box03 dl.b03f dd.b03fl{float:left; width:6px; height:6px; background:url(images/box03_fleft.png);}
.box03 dl.b03f dd.b03fb{float:left; height:6px; background:url(images/box03_fbg.png);}
.box03 dl.b03f dd.b03fr{float:left; width:6px; height:6px; background:url(images/box03_fright.png);}

li{margin:0; padding:0; list-sytle:none}
</style>
<script>
	function updateTatal(){
		var table = document.getElementById("goodsList");
		var total =0;
		for(var i=0;i<table.rows.length;i++){
			var row = table.rows[i];
			var index=row.id.indexOf("goods");
			if( index != -1){
				var suffix = row.id.substring("goods".length,row.id.length);
				var divNode = document.getElementById("labelJifen"+suffix);
				var textnode = divNode.firstChild;
				total= total +  parseInt(textnode.nodeValue);
			}
		}
		document.getElementById("totalJifen").innerHTML=total;
		document.getElementById("totalMoeny").innerHTML="¥"+total;
	}
	
	function changeCount(seqTime,rowNumber,price){
		var totalNumber = document.getElementById("totalNumber"+rowNumber);
		/*
		var definePrice = new Number( price);
		var defineNumber = new Number(totalNumber.value);
		var totalPrice = definePrice.mul( totalNumber.value );
		*/
		var   re=/^([1-9])|([1-4]\d)|50$/; 
	    if  ( re.test(totalNumber.value)){ 
			var totalPrice= price * totalNumber.value;
			document.getElementById("lablePrice"+rowNumber).innerHTML="¥"+totalPrice;
			document.getElementById("labelJifen"+rowNumber).innerHTML=totalPrice;	
			updateTatal();
			 $.ajax({
		        	type: "POST",
		         	url: "changeCount.action",
		         	data:{"seqTime":seqTime,"orderNumber":totalNumber.value}, 
		         	success: function(msg){
		         	}   
		      	});
	    }
	}
	function delGoods(seqTime,goodstype,tableRowId){
		var row= document.getElementById("goods"+tableRowId);
		var table=row.parentNode;
		table.removeChild(row);
		updateTatal();
		$.ajax({
        	type: "POST",
         	url: "delGoods.action",
         	data:{"seqTime":seqTime}, 
         	success: function(msg){
         	}   
      	});
	}
	function clearCar(){
		if (confirm("确定要清除购物车吗？")){
	        $.ajax({
	        	type: "POST",
	         	url: "clearCar.action",
	         	success: function(msg){
		        	var data = eval(msg);
		        	if (data){
		        		var table = document.getElementById("goodsList");
		        		for(var i=0;i<table.rows.length;i++){
		        			var row = table.rows[i];
		        			var index=row.id.indexOf("goods");
		        			if( index != -1){
			        			row.parentNode.removeChild(row);
		        			}
		        		}
		        		document.getElementById("totalJifen").innerHTML="";
		        		document.getElementById("totalMoeny").innerHTML="";
		        	}
	         	}   
	      	});
		}
	}
</script>

</head>
<body>

<div style="background-color:#FFFFFF;width: 950px;margin:0 auto;">
	<%@ include file="navigate.jsp" %>
<%-- main begin --%> 	
<div>
 
<form name="aspnetForm" method="post" action="/ShoppingCar.aspx" id="aspnetForm">
<div class="scbox">
	<dl class="box3">
		<dd class="tl gg31tleft"></dd>
		<dd class="tb gg31tbg" style="width: 928px;">
			<div class="tl1">购物流程</div>
		</dd>
		<dd class="tr gg31tright"></dd>
		<dd class="bg gg31bg" style="width: 940px; height: 81px;">
			<div class="lc"><img src="images/sc_img2.png" /></div>
			<div class="lc"><img src="images/sc_img3.png" /></div>
			<div class="lc"><img src="images/sc_img4.png" /></div>
			<div class="lc"><img src="images/sc_img3.png" /></div>
			<div class="lc"><img src="images/sc_img5.png" /></div>
			<div class="lc"><img src="images/sc_img3.png" /></div>
			<div class="lc"><img src="images/sc_img6.png" /></div>
			<div class="floatend"></div>
		</dd>
		<dd class="bl gg31bleft"></dd>
		<dd class="bb gg31bbg" style="width: 928px;"></dd>
		<dd class="br gg31bright"></dd>
		<dd class="floatend"></dd>
	</dl>
</div>


<div class="scbox">
	<dl class="box3">
		<dd class="tl gg31tleft"></dd>
		<dd class="tb gg31tbg" style="width: 928px;">
			<div class="tl1">我购买的商品</div>
		</dd>
		<dd class="tr gg31tright"></dd>
		<dd class="floatend"></dd>
	
<dd class="bg gg31bg" style="width: 940px;">
	<table class="spc" id="goodsList">
		 <tr>
			  <th style="width: 60px;">商品类别</th>
			  <th style="width: 75px;">商品图片</th>
			  <th style="width: 200px;">商品名称（属性）</th>
			  <th style="width: 270px;">标准配置</th>
			  <th style="width: 80px;">商品价格</th>
			  <th style="width: 60px;">赠送积分</th>
			  <th style="width: 70px;">商品数量</th>
			  <th style="width: 70px;">操作</th>
		</tr>
 		<c:forEach var="mobile" items="${orderList}" varStatus="status">  
		<tr id="goods${status.index}">
			  <td class="c">
			  	<c:if test="${goodstype == 0 }">手机</c:if>
			  	<c:if test="${goodstype == 1 }">配件</c:if>
			  </td>
			  <td class="c">
			    <a href="detailMobile.action?productId=${mobile.productId }" target="_blank">
			      <img src="<%=contextPath%>/${mobile.imagepath}"   style="width: 70px; height: 90px;"/>
			    </a>
			  </td>
			  <td class="c">${mobile.name }<br/><c:if test="${ mobile.colorName != null }">（${ mobile.colorName }）</c:if></td>
			  <td class="c">${mobile.standard}</td>
			  <td class="c cm"><div   id="lablePrice${status.index}">¥${mobile.price * mobile.orderNumber }</div></td>
			  <td class="c cp"><div   id="labelJifen${status.index}">${mobile.price * mobile.orderNumber}</div></td>
			  <c:set var="total" value="${total+ (mobile.price * mobile.orderNumber)}"/>
			  <td class="c">
			    <div>
			      <input id="totalNumber${status.index}"  name="totalNumber${status.index}" value="${mobile.orderNumber }"  maxlength="4" style="width: 36px; text-align: center;" type="text"/>
			    </div>
			    <div style="padding-top: 3px;">
			      <a href="#"  title="保存数量">
			        <img   src="images/sc_img19.png" onclick="changeCount(${mobile.timeSeq},${status.index},${mobile.price })" />
			      </a>
			    </div>
			  </td>
			  <td class="c">
			    <a href="javascript:delGoods(${mobile.timeSeq},${mobile.goodstype },${status.index})">
			      <img id="img" src="images/sc_img15.png" alt=""/>
			    </a>
			  </td>
		</tr>
		</c:forEach>
		<tr>
			<td class="split" colspan="8"></td>
		</tr>
		<%--
		<tr>
			<td class="zzfw" colspan="8">
				<div class="zzfw_txt">
					<div><span class="zzfw_txt_line1">购买延保通服务 - 保修时间更长、保修范围更广、独享绿色通道不排队！</span></div>
					<div><span class="zzfw_txt_line2">手机保修两年，十五天包换，配件一个月包换，开通绿色通道享受优先服务，真正的省心、安心、放心、开心！仅需加 <span class="sp_red_b">机价 5%</span> 即可享受。</span></div>
				</div>
				<div class="zzfw_oper">
					<div class="zzfw_oper_line1"><a href="javascript:AddAdditional(1);" style="display: none;"><img id="imgAddi" src="images/sc_img20.png" alt=""/></a></div>
					<div><span class="zzfw_oper_line2"><a href="StaticHelp.aspx?v1=43" target="_blank" title="订单总金额加5%，您可以享受增保服务。点击查看详细介绍">查看延保通服务说明</a></span></div>
				</div>
			</td>
		</tr>
		 --%>
		 <c:if test="${ orderList==null || fn:length(orderList)==0 }">
		<tr>
			<td class="f" colspan="8"><a href="mobileCenter.action"><font size='5' color='black'>您的购物车中无任何商品，您可以：如果您还未登录，可能导致购物车中无商品，请 马上登录马上去 选择商品</font></a></td>
		</tr>
		</c:if>
		<c:if test="${  fn:length(orderList)>0 }">
		<tr>
			<td class="f" colspan="8">
				<dl>
					<dd>本次购物您将获得：<span id="totalJifen" class="p">${ total }</span> 积分</dd>
					<dd class="m">合计总价（不包含运费）：<span  id="totalMoeny" class="p1">${total }</span> 元</dd>
					<dd class="o">
						<a href="#"  onclick="clearCar()"><img id="imgClear" src="images/sc_img8.png" alt="清空购物车"/></a>
						<a href="buyOrder.action"><img id="imgBuy" src="images/sc_img9.png" alt="我要购买"/></a>
					</dd>
					<dd class="floatend"></dd>
				</dl>
			</td>
		</tr>
		</c:if>
	 </table>
 
	</dd>
	</dl>
</div>
 
 
</form>  

</div>
 	
	
<%-- main end --%> 	
	  <%@ include file="bottom.jsp" %>
</div>
 <div style="width:950px;height: 15">&nbsp;</div>
</body>
</html>
